<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="跟进"
      :visible.sync="followDialogShowed"
      :columns="followColumns"
      @submit="handleSubmitFollowCmd"
    />

    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入旺旺号"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/import_ahead_refund_example.xls" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/cmt/ahead-refund-register/batch-import-refund-status"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import OnlineStatusEnum from '@/framework/constant/OnlineStatusEnum'
import { aheadRefundRegisterApi } from '@/feature/cmt/infra/api/aheadRefundRegisterApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import AheadRefundStatusEnum from '@/feature/cmt/infra/constants/AheadRefundStatusEnum'
import DateType from '@/framework/constant/DateType'
import DateUtil from '@/framework/infra/util/DateUtil'
import ComplainFinalStatusEnum from '@/feature/cmt/infra/constants/ComplainFinalStatusEnum'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import DialogColumnsForm from '@/framework/components/form/DialogColumnsForm'
import { deliveryComplainApi } from '@/feature/cmt/infra/api/deliveryComplainApi'
import { mapGetters } from 'vuex'
import { freightTemplateApi } from '@/feature/pdt/infra/api/freightTemplateApi'
import FileUploader from '@/framework/components/FileUploader'

export default {
  components: { FileUploader, DialogColumnsForm, CURDTable },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      followDialogShowed: false,
      importDialogShowed: false,

      formData: {},
      followColumns: [
        {
          label: '跟进记录',
          prop: 'followerRecords',
          width: 200,
          span: 24,
          rows: 5,
          type: ColumnType.TEXTAREA
        }
      ],

      option: {
        opFixed: false,
        requestApi: aheadRefundRegisterApi,
        showSelection: true,
        dialogWidth: '600px',
        columns: [
          {
            span: 24,
            label: '只看我的',
            searchCached: true,
            hiddenInTable: true,
            hiddenInForm: true,
            searchable: true,
            type: ColumnType.CHECK,
            required: true,
            width: 150,
            prop: 'mineFlag'
          },
          {
            label: '店铺',
            prop: 'storeId',
            width: 120,
            searchCached: true,
            searchable: true,
            span: 24,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            span: 24,
            label: '旺旺号',
            required: true,
            width: 150,
            searchable: true,
            prop: 'wangwangNo'
          },
          {
            label: '快递单号',
            required: true,
            span: 24,
            searchable: true,
            prop: 'expressNo',
            searchOption: {
              options: {
                type: ColumnType.TEXTAREA
              }
            },
          },
          {
            label: '登记日期',
            type: ColumnType.DATE,
            width: 90,
            required: true,
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'registerDate',
            searchable: true
          },
          {
            label: '跟进人',
            hiddenInForm: true,
            type: ColumnType.SELECT,
            width: 100,
            searchable: true,
            options: adminApi.listAll(),
            prop: 'creatorId'
          },
          // {
          //   label: '跟进人',
          //   width: 100,
          //   searchable: true,
          //   hiddenInForm: true,
          //   prop: 'followerId',
          //   type: ColumnType.SELECT,
          //   options: adminApi.listAll()
          // },
          {
            label: '备注',
            span: 24,
            // hiddenInForm: true,
            viewDetail: true,
            type: ColumnType.TEXTAREA,
            prop: 'followerRecords'
          },
          {
            label: '是否已退货',
            searchable: true,
            type: ColumnType.RADIO,
            width: 90,
            hiddenInForm: true,
            options: AheadRefundStatusEnum,
            prop: 'status'
          },

          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    async handleSubmitFollowCmd({ done }) {
      try {
        await aheadRefundRegisterApi.follow(this.formData)
        this.$refs.table.reloadTable()
        this.followDialogShowed = false
      } finally {
        done()
      }
    },
    handleBatchFollow({ $service }) {
      const ids = $service.notEmptySelectedIds
      if (ids) {
        this.$confirm('确认标记所选已发货吗', '提示').then(async() => {
          await aheadRefundRegisterApi.batchFollow({ ids })
          this.$refs.table.reloadTable()
          this.$success('标记成功')
        })
      }
    },
    handleImport() {
      this.importDialogShowed = true
    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleFollow({ arg }) {
      this.$confirm('确认标记已发货吗', '提示').then(async() => {
        await aheadRefundRegisterApi.follow({ id: arg.id })
        this.$refs.table.reloadTable()
        this.$success('标记成功')
      })
      // this.followDialogShowed = true
      // const currentTime = DateUtil.currentTime()
      // this.formData = {
      //   ...arg,
      //   followerRecords: (arg.followerRecords ? arg.followerRecords + '\n' : '') + `【${this.userInfo.title} ${currentTime}】`
      // }
    }
  }
}
</script>

<style>
.p {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
</style>
